<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/swiper-3.3.1.min.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/regist.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .register{margin: 50px 0;}
        .regist-box{width: 550px;height: 500px;border: 1px solid #d9d9d9;box-shadow: 0 0 10px #ccc;}
        .title-switch{width: 280px;padding-top: 30px;margin-left: 35px;cursor: default;}
        .title-switch .col-6{border-bottom: 2px solid #fff;line-height: 40px;text-align: center;}
        .title-switch .active{color: #333;border-bottom: 2px solid #e65188;}
        .input-group{width: 280px;margin-left: 35px;}
        .input-group .input{width: 100%;height: 40px;margin-top: 20px;display: block;border: 1px solid #ddd;}
        .input-group .input input{float: left;width: 240px;height: 100%;font-size: 14px;text-indent: 10px;color: #666;}
        .input-group .input img{float: right;width: 20px;margin-top: 10px;margin-right: 10px;}
        .input-group button{display: block;border: none;outline: none;border-radius: 5px;width: 100%;height: 40px;}

        .agree{margin: 20px 0;display: block;}
        .agree a{color: #3b9ad4;}

        .phone{display: none;}
    </style>
</head>
<body ng-app="">
<div class="container-fluid" style="border-bottom: 1px solid #ddd;">
    <div class="container" style="height: 118px;">
        <a href="index.html"><img class="logo fl" src="../img/index_07.png" alt=""/></a>
        <p class="fr fs-12" style="margin-top: 80px;">有账号 <a style="color: #3b9ad4;" href="../html/login.html">在此登录</a></p>
    </div>
</div>
<div class="container register clear">
    <img class="fl" src="../img/QQ截图20160727174242.png" alt="" width="600" height="500"/>
    <div class="fr regist-box">
        <div class="title-switch clear">
            <div class="col-6 color-666 active" regist-target="email">邮箱注册</div>
            <div class="col-6 color-666" regist-target="phone">手机注册</div>
        </div>
        <div class="input-group email">
            <label class="input">
                <input type="text" placeholder="用户名"/>
                <img src="../img/user.png" alt=""/>
            </label>
            <label class="input">
                <input type="text" placeholder="邮箱地址"/>
                <img src="../img/email.png" alt=""/>
            </label>
            <label class="input">
                <input type="password" placeholder="设置密码"/>
                <img src="../img/lock%20(1).png" alt=""/>
            </label>
            <label class="input">
                <input type="password" placeholder="确认密码"/>
                <img src="../img/lock%20(1).png" alt=""/>
            </label>
            <label class="agree fs-12 color-333">
                <input class="vertical-m" type="checkbox"/> 阅读并同意《<a href="">服务协议</a>》
            </label>
            <button class="b-red white" type="button">同意协议并注册</button>
        </div>
        <div class="input-group phone">
            <label class="input">
                <input type="text" placeholder="用户名"/>
                <img src="../img/user.png" alt=""/>
            </label>
            <label class="input">
                <input type="text" placeholder="手机号码"/>
                <img src="../img/iphone.png" alt=""/>
            </label>
            <label class="input">
                <input type="password" placeholder="设置密码"/>
                <img src="../img/lock%20(1).png" alt=""/>
            </label>
            <label class="input">
                <input type="password" placeholder="确认密码"/>
                <img src="../img/lock%20(1).png" alt=""/>
            </label>
            <label class="agree fs-12 color-333">
                <input class="vertical-m" type="checkbox"/> 阅读并同意《<a href="">服务协议</a>》
            </label>
            <button class="b-red white" type="button">同意协议并注册</button>
        </div>
    </div>
</div>
<div ng-include="'../public/footer2.html'"></div>
</body>
<script>
    $(function(){
        $('.title-switch div').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.input-group').hide();
            var _target = $(this).attr('regist-target');
            $('.'+_target+'').show()
        })
    })
</script>
</html>